<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload=function(){
				//获取四个多选框
				var items=document.getElementsByName("items");
				
				//全选/全不选单选框
				var checkedAllBox=document.getElementById("checkedAllBox");
					
				//全选按钮
				var checkedAllBtn=document.getElementById("checkedAllBtn");
				
				checkedAllBtn.onclick=function(){
					
					//alert("全部选中");
				
					//遍历items
					for (var i = 0; i < items.length; i++) {
						
					//设置四个多选框为选中状态
						items[i].checked=true;
					}
					
					checkedAllBox.checked=true;
				}
				
				//全不选按钮
				var checkedNoBtn=document.getElementById("checkedNoBtn");
				
				checkedNoBtn.onclick=function(){
					
					//alert("全不选");
				
					//遍历items
					for (var i = 0; i < items.length; i++) {
						
					//设置四个多选框为未选中状态
						items[i].checked=false;
					}	
					
					checkedAllBox.checked=false;
				}
				
				//反选按钮
				var checkedRevBtn=document.getElementById("checkedRevBtn");
				
				checkedRevBtn.onclick=function(){
					
					//alert("全不选");
					
					//设置全选框默认为选中状态
						checkedAllBox.checked=true;
						
					//遍历items
					for (var i = 0; i < items.length; i++) {
						
					//判断多选框状态
						/*if(items[i].checked==true){
							//已选中，设置为未选中
							items[i].checked=false;
						}else{
							//未选中，设置为选中
							items[i].checked=true;
						}*/
						
						items[i].checked=!items[i].checked;
						
						//当有未选中时
							if(!items[i].checked){
								//改变全选框为未选中
								checkedAllBox.checked=false;								
							}
					}
					
					//反选时判定是否为全选或全不选，作用于checkedAllBox
			
				}
				
				//提交按钮
				
				//获取提交按钮对象
				var sendBtn=document.getElementById("sendBtn");
				
				//绑定单击事件：
				sendBtn.onclick=function(){
					
					for (var i = 0; i < items.length; i++) {
						
						if(items[i].checked==true){
							alert(items[i].value);
							
						}
						
					}
				
	
				}
				
				
				
				checkedAllBox.onclick=function(){
					
					for (var i = 0; i < items.length; i++) {
						items[i].checked=checkedAllBox.checked;
					}
			
				}
					
				/*四个多选框选中	  -->checkedAllBox自动选中
				* 四个多选框中有未选中的-->checkedAllBox不选中
				* */
				//为四个多选框绑定单击事件
				//遍历四个多选框
				for (var i = 0; i < items.length; i++) {

					//绑定事件
					items[i].onclick=function(){
						
						//设置全选框默认为选中状态
						checkedAllBox.checked=true;
						
						for (var j = 0; j < items.length; j++) {
							
							//当有未选中时
							if(!items[j].checked){
								//改变全选框为未选中
								checkedAllBox.checked=false;
								//得到未选中的结果则退出循环
								break;
							}
							
						}
						
					}
						
				}
				
				
				
				
				
			}
			
			
			
		</script>
	</head>
	<body>
		
		<form method="post" action="">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox"  />全选/全不选
			
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反选" />
			<input type="button" id="sendBtn" value="提交" />	
		</form>
	</body>
</html>
